Denoの静的サイトジェネレータ`Lume`の紹介

2024-06-09 08:56| 来源: 网络整理| 查看: 265

2023年12月に静的サイトジェネレータであるLumeのバージョン2がリリースされました．私は個人ブログを書くのに GitHub Pages + Lume を利用しているので，年末はLumeのバージョンアップなどの作業をしていたのですが，改めて体験が良いなと思ったのでLumeの紹介をしたいと思います．

前提知識 GitHub Pages

GitHub PagesはGitHub社がプロジェクトのプロジェクトのウェブサイトを提供することを目的に，リポジトリに配置してある静的ファイル(HTMLやJSなど)をホスティングしてウェブサイトを公開してくれるサービスです．@a-skuaというアカウント名の場合，a-skua.githu.io をというリポジトリを作成すると，https://a-skua.github.io[1]というURLのウェブサイトを作ることができます．

GitHub Pages の良いところは，コミットしてプッシュすることでウェブサイトの内容を更新できるところです．この体験はZennでもお馴染みのものですね．

ただし，GitHub Pagesが直接サポートしているのは素のHTMLやJSか，Jekyllという静的サイトジェネレータのみです．

Lume

LumeはJavaScript製の静的サイトジェネレータです． Lumeの良いところとして，Denoをランタイムとして利用しているため，環境構築からビルドするまでのコストが低いというのがあります．

git cloneしてきた直後に npm installなどを行う必要がなく， deno task buildだけで静的ファイルを生成できるのはDenoの特徴の一つです． (Denoは他にも deno run your.tsといったようにTypeScriptのファイルを直接実行できるのも魅力的なポイントです)

Lumeの良いところファイル構成が明快

Jekyllなどのテンプレートエンジンと同様に，Lumeもファイル構成がそのままルーティングとして展開されるため，構成が読みやすいというメリットがあります．例えば次のようなファイル構成[2]にしていた場合，

├── _config.ts ├── abount.md ├── index.md ├── index.scss ├── index.ts └── post └── index.page.ts

次のように展開されます．

├── about │ └── index.html ├── index.css ├── index.html ├── index.js └── post └── index.html

直感的で良いですね．

テンプレートにTypeScriptを使える

Lumeの良いところとして，テンプレートにTypeScriptを(もちろんJavaScriptも)使えるという点があります．

例えば，次のようなindex.mdは，

--- title: My Home Page! layout: layout.vto --- Hello, Lume!

index.page.ts[3]に書き直すことができます．

export const title = "TypeScript Template!"; export const layout = "layout.vto"; export default function() { return "

Hello Lume!

"; }

TypeScriptをテンプレートに使うことで，ページネーションなどのあらかじめ枚数のわからないページを動的に生成することができます．

ブログを書くという目的の中ではあまり多用する機能ではないですが，スクリプトをテンプレートして利用できると痒い所に手が届くので，あると嬉しい機能の一つです．ページネーションを実現するために「ブラックボックスのページネーションプラグインを利用してね」ではなく，「スクリプトのジェネレーター構文を用いることでページネーションを実現できるよ」というスタンスも個人的に好感を持っているポイントの一つです．

TSやSCSSなどを扱える

ウェブサイト用のJSやCSSをTSやSCSSで書きたい! という要望にも応えてくれます． TS(テンプレートではなくスクリプトして扱いたい場合)やSCSSはLumeに標準インストールされていませんが，オプションのプラグインとして用意されています． TSであればESBuild，SCSSであればSASSをそれぞれ _config.ts[2:1]にインポートするだけでindex.tsはindex.jsに，index.scssはindex.cssに展開されます．

import lume from "lume/mod.ts"; +import esbuild from "lume/plugins/esbuild.ts"; +import sass from "lume/plugins/sass.ts"; const site = lume(); +site.use(esbuild()); +site.use(sass()); export default site; テンプレートエンジンとしてTSX(JSX)を使える

これは嬉しい人が多いのではないでしょうか? (私は嬉しい)

先ほど紹介した index.page.tsはindex.tsxに書き直すことができます．

import * as React from "npm:react"; export const title = "TypeScript Template!"; export const layout = "layout.vto"; export default function() { return Hello, Lume!; }

TSやSCSS同様に，こちらも標準インストールされているプラグインではないため，JSXプラグインを_config.tsにインポートする必要があります．

豊富なプラグイン

上記で紹介したESBuildやSASS，JSX以外にも多くのプラグインが用意されています．例えば，サイトに埋め込むデータのフォーマットして，JSONやYAMLが標準インストールされていますが，TOMLなども利用できます(私は嬉しい)．

他にもKatexやMinify HTML，Transform Images，Feedなどのプラグインが用意されています．使いたい機能がないか，一度公式のプラグイン一覧を眺めてみることをお勧めします．

GitHub Pages にデプロイするには

GitHub Pagesが直接サポートしている静的サイトジェネレータはJekyllのみですが，GitHub Actionsを用いることで，Jekyll以外のジェネレータを利用することができます．以前はGitHub PagesでウェブサイトをホスティングしようとするとJekyll以外は事前にローカルでビルドするしか方法がありませんでしたが，GitHub Actionsの登場によってJekyll以外のジェネレータでもソースファイルをプッシュするだけでビルドできるようになりました．それもあり，ブログのジェネレータをJekyllからLumeに移行したという経緯があります．

Lumeの公式ドキュメントにて紹介されているGitHub Pagesへデプロイするための設定ファイルをそのままGitHub Actionsに設定することで，新しい記事をマークダウンで書いてコミット&プッシュするだけで新しい記事を公開することができます．

下記は私のブログのデプロイ設定[4]です．

https://github.com/a-skua/a-skua.github.io/blob/6393345ae4994e7b805d2310f21f50455b2c50c2/.github/workflows/pages.yaml#L17-L44

私は元々Jekyllを用いてGitHub Pagesを構築していたのですが，ウェブサイトを動的に生成するのにJavaScriptを直接扱えないことに若干の不便さを感じていた一方で，Node.jsをランタイムに用いているジェネレータは環境構築が煩雑そうでだという理由で敬遠していました．その点，Lumeは環境構築周とファイル構成ともにシンプルかつTypeScriptで設定をかけるという個人的に感じていた課題感を全て解決してくれていて非常に体験が良いです．

最後に

少しでもLumeを良いなと思ったそこのあなた! deno run -Ar https://deno.land/x/lume/init.tsを実行してLumeの環境を構築し，公式ドキュメントのCreate your first pageからLumeに入門しましょう🎉

脚注

CNAMEを設定しているため， https://www.askua.dev/に飛ばされますが，何も設定していない場合はhttps://a-skua.github.ioでホスティングされます． ↩︎

_config.tsはLumeの設定ファイルです．_で始まるファイルは，ビルド対象から除外されます． ↩︎ ↩︎

TSテンプレートの拡張子は元々.temp.tsでしたが，バージョン2から.page.tsに変更されました． ↩︎

気泡が少々古いので，コピペする場合は公式の設定を参照してください． ↩︎

【本文地址】

公司简介

联系我们